<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var mychart = echarts.init(document.getElementById('chart'));

		mychart.setOption({
			legend: {},
			tooltip: {},
			yAxis: {},
			/* xAxis:{
				data:['iphone4','iphone5','iphone6','iphone7'],
			},
			series:[
				{
					name:'2014',
					type:'bar',
					data: [89.3, 92.1, 94.4, 85.4]
				},
				{
					name:'2015',
					type:'bar',
					data: [95.8, 89.4, 91.2, 76.9]
				},
				{
					name:'2016',
					type:'bar',
					data: [97.7, 83.1, 92.5, 78.1]

					[95.8, 89.4, 91.2, 76.9],
					[97.7, 83.1, 92.5, 78.1]
				},
			] */


			xAxis: {
				type: 'category',
			},
			series: [
				{
					type: 'bar',
				},
				{
					type: 'bar',
				},
				{
					type: 'bar',
				},
			],
			dataset: {
				source: [
					['product', '2014', '2015', '2016'],
					['iphone4', 43.3, 85.8, 93.7],
					['iphone5', 83.1, 73.4, 55.1],
					['iphone6', 86.4, 65.2, 82.5],
					['iphone7', 72.4, 53.9, 39.1]
				],
				sourceHeader: true,
				dimensions: ['product', '2014', '2015', { name: '2016', type: 'number' }],

				source: [
					{ product: 'iphone4', '2014': 43.3, '2015': 85.8, '2016': 93.7 },
					{ product: 'iphone5', '2014': 83.1, '2015': 73.4, '2016': 55.1 },
					{ product: 'iphone6', '2014': 86.4, '2015': 65.2, '2016': 82.5 },
					{ product: 'iphone7', '2014': 72.4, '2015': 53.9, '2016': 39.1 },
				],
				source: {
					product: ['iphone4', 'iphone5', 'iphone6', 'iphone7'],
					'2014': [43.3, 83.1, 86.4, 72.4],
					'2015': [85.8, 73.4, 65.2, 53.9],
					'2016': [93.7, 55.1, 82.5, 39.1],
				}
			}
		});
	</script>
</body>

</html>